<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
	  xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:f="http://java.sun.com/jsf/core"
 	  xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

		<ui:composition template="/plantillas/comun.xhtml">
			<ui:define name="pageTitle">
				<h:outputText value="Roles - Vimeworks"/>
			</ui:define>
			<ui:define name="pageContent">
				<h:form>
					<h3>
						<h:outputText value="Administraci&#243;n de Roles"/>
					</h3>
					<h:outputText value="Nombre:" />
					<h:inputText value="#{administracionRoles.nombreBusqueda}"/>
					<a4j:commandButton value="Buscar" action="#{administracionRoles.buscar}" render="listadoRoles" execute="@form"/>
					<h:commandButton value="Nuevo">
						<rich:componentControl target="modalNuevoRol" operation="show"/>
					</h:commandButton>
					<br/><br/>
					<h:panelGroup id="listadoRoles">
						<rich:dataTable id="tablaRoles" value="#{administracionRoles.listaRoles}" var="rol" rows="10" noDataLabel="No se han encontrado resultados">
							<rich:column>
								<f:facet name="header">
									<h:outputText value="C&#243;digo" />
								</f:facet>
								<h:outputText value="#{rol.codigo}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="Nombre" />
								</f:facet>
								<h:outputText value="#{rol.nombre}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="Estado" />
								</f:facet>
								<h:outputText value="#{rol.estado}" />
							</rich:column>
							<rich:column>
								<a4j:commandLink actionListener="#{administracionRoles.editarRol}" oncomplete="#{rich:component('modalActualizarRol')}.show(); return false;" render="panelActualizacion">
									<h:graphicImage value="/images/info.png" width="20px" height="20px" title="Editar"/>
								</a4j:commandLink>
								<a4j:commandLink actionListener="#{administracionRoles.eliminarRol}" onclick="return mostrarConfirmacion('Esta seguro que desea eliminar el registro?');" render="listadoRoles">
									<h:graphicImage value="/images/remove.png"  width="20px" height="20px" title="Eliminar"/>
								</a4j:commandLink>
							</rich:column>
						</rich:dataTable>
						<rich:dataScroller for="tablaRoles" maxPages="5" />
					</h:panelGroup>
				</h:form>
				<rich:popupPanel id="modalNuevoRol" modal="true" autosized="true">
					<f:facet name="header">
						<h:outputText value="Ingreso de Rol" />
					</f:facet>
					<h:form>
						<a4j:outputPanel id="panelIngreso" >
							<h:panelGrid columns="2">
								<h:outputText value="Nombre:"/>
								<h:inputText id="nombreNuevoRol" value="#{administracionRoles.nombreNuevoRol}" maxlength="50" size="35" required="true">
								</h:inputText>
								<h:outputText value="Descripci&#243;n:"/>
								<h:inputTextarea value="#{administracionRoles.descripcionNuevoRol}" rows="5" cols="35" />
							</h:panelGrid>
							<br/>
							<a4j:commandButton value="Guardar" action="#{administracionRoles.guardarNuevoRol}" 
											   render="listadoRoles panelIngreso" 
							                   execute="@form" oncomplete="#{rich:component('modalNuevoRol')}.hide(); return false;">
							</a4j:commandButton>
							<a4j:commandButton value="Cancelar" onclick="#{rich:component('modalNuevoRol')}.hide(); return false;" render="formularioNuevoRol" immediate="true"/>
						</a4j:outputPanel>
					</h:form>
				</rich:popupPanel>
				<rich:popupPanel id="modalActualizarRol" header="Actualizaci&#243;n de Rol" modal="true" autosized="true">
					<h:form>
						<a4j:outputPanel id="panelActualizacion" >
							<h:panelGrid columns="2">
								<h:outputText value="Nombre:"/>
								<h:inputText id="nombreActualizar" value="#{administracionRoles.rol.nombre}" maxlength="150" size="35" required="true"/>
								<h:outputText value="Descripci&#243;n:"/>
								<h:inputTextarea value="#{administracionRoles.rol.descripcion}" rows="5" cols="35" />
							</h:panelGrid>
							<br/>
							<a4j:commandButton value="Guardar" action="#{administracionRoles.guardarRolActualizado}" render="listadoRoles" oncomplete="#{rich:component('modalActualizarRol')}.hide(); return false;"/>
							<a4j:commandButton value="Cancelar" onclick="#{rich:component('modalActualizarRol')}.hide(); return false;" execute="@none"/>
						</a4j:outputPanel>
					</h:form>
				</rich:popupPanel>
			</ui:define>
		</ui:composition>
	
</html>